<template>
	<div>
		<el-form label-width="100" label-position="left">
			<!-- <el-form-item label="是否使用智能模板">
				<el-switch v-model="useTemplates" active-text="启用" inactive-text="停用" @change="(e)=>toTemplates(e)"/>
			</el-form-item> -->
			<el-form-item label="接收人">
				<el-button @click="toOpenDrew" type="primary">选择接收人</el-button>
				<div style="width: 100%; margin-top: 20px">
					<el-tag style="margin-right: 10px; margin-bottom: 10px" v-for="tag in filterData" :key="tag.value" :type="tag.type">
						{{ tag.label }}
					</el-tag>
				</div>
			</el-form-item>
			<el-form-item label="统计名称" v-for="(item, index) in nameList" :key="index">
				<div class="item_part">
					<el-input style="width: 30%; margin-right: 20px" v-model="item.name"></el-input>
					<el-switch v-model="item.type" style="width: 25%" active-text="定量统计" inactive-text="定性统计" @change="(e) => typeChange(e, item,index)" />
					<label v-if="item.type" style="width: 30%">
						目标值
						<el-input style="width: 80%" v-model="item.num" type="number" @blur="judgeTrue(item.num, index)"></el-input>
					</label>
					<el-icon :size="24" color="red" @click="toDelName(index)">
						<Delete />
					</el-icon>
				</div>
			</el-form-item>
		</el-form>
		<el-button style="width: 100%; margin: 20px 0" type="primary" @click="toAddName">+添加统计名称</el-button>
		<h3 style="margin-bottom: 20px">预览表格</h3>
		<PreviewTable :isRead="true" :data="tableData"></PreviewTable>
		<!-- 选择接收人弹窗 -->
		<el-drawer v-model="drawer" title="选接收人" direction="rtl" size="60%">
			<SelectRecipients @getFilterData="getFilterData"></SelectRecipients>
		</el-drawer>
	</div>
</template>

<script setup lang="ts">
import { ref, reactive, toRefs, onMounted, watch } from 'vue'
import { Delete } from '@element-plus/icons-vue'
import { getStore } from '@/utils/store'
import SelectRecipients from '../selectRecipients/index.vue'
import PreviewTable from '../../previewTable/index.vue'
import {throttle} from '@/utils/util'
import apiMod from '@/apiMod/index'
import router from '@/router'

let props = defineProps({
	nowRowData: {
		type: Object,
		default: () => ({}),
	},
})

let useTemplates = ref(false)
let drawer = ref(false)
let tags = ref([])
let nameList = ref([])
const typeChange = (e, item,index) => {
	if (e) {
		nameList.value[index].num = 0
	} else {
		nameList.value[index].num = undefined
	}
	
}
// 添加统计名称
const toAddName = () => {
	nameList.value.push({ name: '', type: false, num: undefined })
}

// 打开抽屉
const toOpenDrew = () => {
	drawer.value = true
}
// 移除tag
const tagHandleClose = (tag) => {}
// 获取接收人数据
let tableData: any = ref({
	head: {},
	data: [],
})
let nameListHandle = (val) => {
	console.log('knkna',val)
	tableData.value.head = { th1: '接收人' }
	val.forEach((el, index) => {
		tableData.value.head['th' + (index + 2)] = el.name
		tableData.value.head['th' + (index + 2) + '_2'] = '完成度'
		if (el.type) {
			tableData.value.head['th' + (index + 2) + '_1'] = '目标值'
			// tableData.value.head['th'+(index+2)+'_2_val'] = el.num
		}
		for (let i in tableData.value.data) {
			tableData.value.data[i]['tr' + (index + 2)] = ''
			tableData.value.data[i]['tr' + (index + 2) + '_2'] = ''
			tableData.value.data[i]['tr' + (index + 2) + '_1'] = el.num
		}
	})
}
let filterData = ref([])
let filterType = ref('area')
let dimension = ref('')
let selectAreaData = ref({})
const areaHandle = (data) => {
	dimension.value = data.dimension
	filterData.value = data.list
	if (filterData.value && filterData.value.length > 0) {
		tableData.value.head['th1'] = '接收人'
	} else if (filterData.value.length == 0) {
		tableData.value.head = {}
	}
	filterType.value = data.type
	//   nameList.value = []
	tableData.value.data = []
	filterData.value.forEach((el, index) => {
		// tableData.value.data[index+1]['th1'] = el.label
		// tableData.value.data[index+1]['id'] = el.value
		tableData.value.data.push({ tr1: el.label, id: el.value })
	})
}
const getFilterData = (data) => {
	selectAreaData.value = data
	areaHandle(data)
	nameListHandle(nameList.value)
}
// 删除统计名称
const toDelName = (index) => {
	nameList.value.splice(index, 1)
	areaHandle(selectAreaData.value)
	nameListHandle(nameList.value)
}
// 监听nameList

watch(
	nameList,
	(val) => {
		let fn = () =>{
			nameListHandle(val)
		}
		throttle(fn,800)
	},
	{ deep: true }
)
// 提交得到需要的数据

let userInfo = getStore('userInfo')
let getBaseAreaData = () => {
	// 拿到上一级
	const level = ['authProvince', 'authCity', 'authArea', 'authStreet', 'authCommunity']
	let list = level.map((el) => {
		return userInfo[el]
	})
	list = list.filter(Boolean)
	let parentPath = ''
	let myAreaId = ''
	let grandPath = ''
	if (list.length > 1) {
		myAreaId = list[list.length - 1]
		if (list.length >= 2) {
			parentPath = list[list.length - 2]
		}
		if (list.length >= 3) {
			grandPath = list[list.length - 3]
		}
	} else if (list.length == 1) {
		parentPath = list[0]
		myAreaId = list[0]
		grandPath = list[0]
	}
	// 获取名称
	return {
		myAreaId,
		parentPath,
		grandPath,
		length: list.length,
	}
}
//判断输入值的目标值是否正确
const judgeTrue = (e, index) => {
	
	let value = nameList.value[index].num
	if(!value){
		if(value!==0){
			ElMessage.error('请输入正确的数值')
			nameList.value[index].num = 0
		}
	}else{
		if (!Number(value)&&Number(value)!=0) {
		ElMessage.error('请输入数字')
		nameList.value[index].num = 0
		} else if (Number(value) < 0) {
			ElMessage.error('请输入大于等于0数字')
			nameList.value[index].num = 0
		}
	}
}
let getParentPath = async () => {
	// 通过id获取去域名
	let getAreaName = async (id) => {
		let res = await apiMod.admin_sysadministration_detail(id)
		return {
			myAreaName: res.data.administrationName,
			myParentAreaName: res.data.administrationPidName,
		}
	}
	// 拿到上一级
	let { myAreaId, parentPath, grandPath, length } = getBaseAreaData()
	// 获取名称
	let { myAreaName, myParentAreaName } = await getAreaName(myAreaId)
	return {
		myAreaId,
		parentPath,
		grandPath,
		myAreaName,
		myParentAreaName,
		length,
	}
}
let ParentPath: any = {}
let infoArea = ref({})
let fn = async () => {
	ParentPath = await getParentPath()
}
fn()
// 得到props,重新赋值
if (props.nowRowData) {
	if (props.nowRowData.useTemplates == 1) {
		useTemplates.value = true
	} else {
		useTemplates.value = false
	}
	//
	if (props.nowRowData.metadataJson) {
		tableData.value = JSON.parse(props.nowRowData.metadataJson)
	}
	if (props.nowRowData.dimension) {
		dimension.value = props.nowRowData.dimension
	}
	if (props.nowRowData.filterData) {
		filterData.value = props.nowRowData.filterData
	}
	if (props.nowRowData.nameList) {
		nameList.value = props.nowRowData.nameList
	}
}

const submit = () => {
	return {
		useTemplates: useTemplates.value ? 1 : 0,
		useTemplatesLabel: useTemplates.value ? '已使用智能模版' : '未使用智能模版',
		// 上级的区域id
		parentPath: ParentPath.parentPath,
		//
		administrationId: ParentPath.myAreaId,
		administrationName: ParentPath.myAreaName,
		administrationPid: ParentPath.myAreaId,
		administrationPidName: ParentPath.myAreaName,
		metadataJson: JSON.stringify(tableData.value),
		dimension: dimension.value,
		// 无关的，为了回显的数据
		filterData: filterData.value,
		nameList: nameList.value,
	}
}
infoArea.value = getBaseAreaData()
provide('infoArea', infoArea.value)
// 跳转到共享数据
const toTemplates = (e) => {
	if (e) {
		router.push('/taskOffice/taskDown/index')
	}
}

defineExpose({
	submit,
})
</script>
<style lang="scss" scoped>
.item_part {
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
}
</style>
